<template>
  <div class="virtualScroll-page">
    <div class="virtualScroll-page-left">
      <h1>虚拟列表定高实现</h1>
      <div class="page-left-content" ref="virtualScrollPage" @scroll="handleScroll">
        <div class="page-list" :style="{ height: comContainerHeight + 'px' }">
          <div class="page-list-item" v-for="(item, index) in comVirtualScrollList" :key="index + 'indexlist'"
            :style="{ top: (startIndex + index) * itemHeghr + 'px' }">
            {{ item.title + (startIndex + index) * itemHeghr }}
          </div>
        </div>
      </div>
    </div>
    <div class="virtualScroll-page-right">
      <h1>虚拟列表不定高实现</h1>
      <div class="page-right-content">
        <VirtualList :listData="items" :estimatedItemHeight="100" :buffer="2">
          <template v-slot:default="{ item }">
            <div style="padding: 15px; border-bottom: 1px solid #eee;">
              <h3>{{ item.title }}</h3>
              <p>{{ item.content }}</p>
              <img v-if="item.num % 2 == 0" src="../../assets/img/logo.png" style="max-width: 100%;">
            </div>
          </template>
        </VirtualList>
      </div>
    </div>
  </div>
</template>

<script setup>

// 虚拟列表定高实现
const virtualScrollList = ref(Array.from({ length: 100000 }).map((_, i) => {
  return {
    title: '我是' + i + '号'
  }
}))

const startIndex = ref(0)
const endIndex = ref(10)
const itemHeghr = ref(60)
const containerHeight = ref(500)
const virtualScrollPage = ref(null)

const comContainerHeight = computed(() => {
  return itemHeghr.value * virtualScrollList.value.length
})
const comVirtualScrollList = computed(() => {
  return virtualScrollList.value.slice(startIndex.value, endIndex.value)
})

const updateVisibleItems = () => {

  const scoll = virtualScrollPage.value.scrollTop

  startIndex.value = Math.floor(scoll / itemHeghr.value)

  const visibleCount = startIndex.value + Math.ceil(containerHeight.value / itemHeghr.value)

  endIndex.value = Math.min(visibleCount, virtualScrollList.value.length)

}

const handleScroll = () => {
  updateVisibleItems()
}
onMounted(() => {
  updateVisibleItems()
})



// 虚拟列表不定高实现

import VirtualList from '../../components/virtualScroll/virtualScroll.vue'

const items = ref([])
setTimeout(() => {
  items.value = Array.from({ length: 1000 }, (_, i) => ({
    id: i,
    title: `Item ${i}`,
    content: `This is content for item ${i}`,
    num: i
  }))
}, 1000)
</script>

<style lang="scss" scoped>
.virtualScroll-page {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;

  .virtualScroll-page-left {
    .page-left-content {
      width: 80%;
      height: 500px;
      overflow-y: auto;
      margin-top: 30px;

      .page-list {
        width: 100%;
        position: relative;

        .page-list-item {
          width: 100%;
          height: 50px;
          position: absolute;
          border: 1px solid #fff;
        }
      }
    }
  }

  .virtualScroll-page-right {
    .page-right-content {
      margin-top: 30px;
      width: 80%;
      height: 500px;
    }
  }
}
</style>